<template>
    <div>
        <h1>i am Xiaoreceivemanagement</h1>
        <el-button @click="resetaddressFilter">清除收货地址过滤器</el-button>
        <el-button @click="clearFilter">清除所有过滤器</el-button>
        <el-button @click="addNewAddress" class="addNewAddress">添加新的收货地址</el-button>
        <el-button @click="test">测试按钮</el-button>
        <el-table
        :stripe="true"
        height="350"
        max-height="350"
        :default-sort = "{prop: 'address', order: 'descending'}"
        :data="tableData"
        ref="filterTable"
        style="width: 100%">
            <el-table-column
                fixed
                prop="tag"
                label="类型"
                width="70"
                :filters="myfilterstag"
                :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.tag === '公司' ? 'success' : '0' 
                    && scope.row.tag === '学校' ? 'warning' : '0'"
                    disable-transitions>{{scope.row.tag}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                fixed
                prop="name"
                label="收货人"
                width="80">
            </el-table-column>
            <el-table-column
                sortable
                column-key="myaddresstable"
                :filters="myfiltersaddress"
                :formatter="formatter"
                :filter-method="filterHandler"
                prop="address"
                label="收货详细地址"
                width="400">
            </el-table-column>
            <el-table-column
                fixed="right"
                prop="phone"
                label="联系人电话"
                width="120">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
                <el-button
                icon="el-icon-delete"
                type="danger"
                @click.native.prevent="deleteRow(scope.$index, tableData , scope.row)"
                size="small">移除</el-button>
                <el-button
                v-show="!scope.row.isDefault"
                type="info"
                size="mini"
                @click="handledefault(scope.$index, scope.row)">设为默认</el-button>
            </template>
            </el-table-column>
        </el-table>
        <router-view></router-view>
    </div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'Xiaoreceivemanagement',
        data() {
            return {
                myfilterstag:[{ text: '学校', value: '学校' },
                    { text: '家', value: '家' }, 
                    { text: '公司', value: '公司' }],
                myfiltersaddress:[{ text: '北京市', value: '北京市' },
                                { text: '江西省', value: '江西省' },
                                { text: '广州市市普陀区金沙江路 1519 弄', value: '广州市市普陀区金沙江路 1519 弄' },],
                tableData: [],
            }
        },
        methods:{
            test(){
                this.$router.push({name:'xrefreshpage'})
            },
            resetaddressFilter() {
                this.$refs.filterTable.clearFilter('myaddresstable');
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            formatter(row, column) {
                // console.log('@@看看formatter的row:'+row+'和column:'+column);
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            filterHandler(value, row, column) {
                // console.log('@@看看filterHandler的value:'+value+'和row:'+row+'和column:'+column);
                const property = column['property'];
                return row[property] === value;
            },
            deleteRow(index, tableData ,rows) {
                console.log(index,'delete%%%%',rows);
                this.$addr.get(`addresses/${rows.aid}/delete`).then(
                response=>{
                    console.log('请求成功了,我删除了该地址',response)
                    this.$notify.success({
                        title: '提示',
                        message: '删除地址成功!',
                    });
                },error=>{
                    this.$message({
                        message: '呕吼请求失败了',
                            type: 'warning'
                        });
                    console.log('请求失败了,我没有获取到用户的数据',error)
                })
                this.$router.push({name:'xrefreshpage'})
                // tableData.splice(index, 1);
            },
            handledefault(index, row) {
                console.log('setdefault%%%',index, row);
                this.$addr.get(`addresses/${row.aid}/set_default`).then(
                response=>{
                    console.log('请求成功了,我设置了默认地址',response)
                    this.$addr.get(`addresses`).then(
                    response=>{
                        console.log('同时我获取到了该用户地址',response)
                        this.tableData=response.data.data
                    },error=>{
                        this.$message({
                            message: '呕吼请求失败了',
                                type: 'warning'
                            });
                        console.log('请求失败了,我没有获取到用户的数据',error)
                    })
                    this.$notify.success({
                        title: '提示',
                        message: '设为默认地址成功!',
                    });
                },error=>{
                    this.$message({
                        message: '呕吼请求失败了',
                            type: 'warning'
                        });
                    console.log('请求失败了,我没有设置成功',error)
                })
            },
            addNewAddress(){
                this.$router.push({name:'xedrecmanage'})
            },
        },
        mounted(){
            this.$addr.get(`addresses`).then(
            response=>{
                console.log('请求成功了,我获取到了该用户地址',response)
                this.tableData=response.data.data
            },error=>{
                this.$message({
                    message: '呕吼请求失败了',
                        type: 'warning'
                    });
                console.log('请求失败了,我没有获取到用户的数据',error)
            })
        },
        // beforeRouteEnter:(to,from,next) =>{
        //     console.log("进入收货地址页面");
        //     next(vm=>{
        //         vm.$router.push(0)
        //         // vm.getData();
        //     });
        // },
    }
</script>

<style scoped>
    .addNewAddress{
        background-color: rgb(255, 196, 242);
    }
</style>